<template>
  <div class="main-box">
    <el-row justify="center">
        <el-col :span="18">
                <el-row v-for="(item,index) in childrenArr" :key="index" class="listOne" @click="details(index)">
                    <el-col :span="6">
                        <img :src="item.path">
                    </el-col>
                    <el-col :span="18">
                        <h3>{{ item.name }}</h3>
                        <p class="red">官方报价：{{ item.details.price==0? '暂无报价':item.details.price+" 万元起"}}</p>
                        <p>车型：{{ item.details.carSize }}</p>
                        <p>来自：{{ item.details.comefrom }}</p>
                    </el-col>
                </el-row>
        </el-col>
    </el-row>
    <Footer/>
  </div>
</template>

<script>
import { ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Footer from '../views/Footer.vue'
export default {
  components:{
    Footer
  },
  name: '',
  setup() {
    const router = useRouter()
    //获取缓存中的数据
    const childrenArr=ref([])
    const getSessionData = ()=>{
        let sessionData =JSON.parse(sessionStorage.getItem('data')) 
        childrenArr.value = sessionData.children
    }
    onMounted(() => {
        getSessionData()
    })

    //点击进入购买详情页面
    const details = (index)=>{
      sessionStorage.setItem('data1',JSON.stringify(childrenArr.value[index]))
      router.push('/details')
    }
    return {
      childrenArr,details
    }
  },
}

</script>
<style scoped lang='scss'>
    .main-box{
      background-color: #F2F3F5;
    }
    .listOne{
        padding: 20px;
        border: 1px #303133 solid;
        margin: 5px 0 5px 0;
        cursor: pointer;
        img{
          width: 100%;
        }
        .red{
          color: rgb(240, 12, 12);
          font-weight: 600;
        }
    }
</style>